<template>
  <div class="__form">
    <div v-if="loading" style="height: 500px; position: relative">
      <div class="flex-center position-center">
        <div></div>
        <div>
          <i class="el-icon-loading m-r-10"></i>
          加载数据中...
        </div>
        <div></div>
      </div>
    </div>
    <div v-else>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="180px">
        <el-form-item label="团队名称" prop="teamName">
          <el-input v-model="form.teamName" class="w-200"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="concatName">
          <el-input v-model="form.concatName" size="large" class="w-200" />
        </el-form-item>
        <el-form-item label="联系电话" prop="concatPhone">
          <el-input v-model="form.concatPhone" size="large" class="w-200" />
        </el-form-item>
        <el-form-item label="协议价格（元）" prop="agreePrice">
          <el-input
            :min="0"
            class="w-200"
            v-model="form.agreePrice"
            size="large"
          />
        </el-form-item>
        <el-form-item label="额度使用上限（元）" prop="creditMoney">
          <el-input
            :min="0"
            class="w-200"
            v-model="form.creditMoney"
            size="large"
          />
        </el-form-item>
        <el-form-item label="账期（天）" prop="billDay">
          <el-input-number
            :min="31"
            class="w-200"
            v-model="form.billDay"
            size="large"
          />
        </el-form-item>
        <div class="dividing-line m-t-20 m-b-20"></div>
        <div class="pull-center">
          <el-button type="primary" plain @click="back" size="small">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="save"
            :loading="saveLoading"
            size="small"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { recordDetail, save, update } from "@/api/business/filling-team";
import { msgSuccess, msgError } from "@/util/common-util";
import axios from "axios";
import { isMobile } from "@/util/validate";

export default {
  name: "contract-customer-add-content",
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      saveLoading: false,
      loading: false,
      form: {
        teamName: "",
        creditCode: "",
        registeAddress: "",
        registePhone: "",
        bankName: "",
        accountNo: "",
        concatName: "",
        concatPhone: "",
        agreePrice: 0,
        creditMoney: 0,
        billDay: 31,
        delayDay: 0,
        contractExpireTime: "",
        hasMachine: 0,
        fillMachineIds: [],
        businessLicenseIds: [],
        contractIds: [],
        appId: "",
        appSecret: "",
      },
      rules: {
        teamName: [
          { required: true, message: "请填写企业/车队名称", trigger: "blur" },
        ],
        registeAddress: [
          { required: true, message: "请填写注册地址", trigger: "blur" },
        ],
        registePhone: [
          { required: true, message: "请填写注册电话", trigger: "blur" },
        ],
        concatName: [
          { required: true, message: "请填写联系人", trigger: "blur" },
        ],
        concatPhone: [
          { required: true, message: "请填写联系电话", trigger: "blur" },
        ],
        agreePrice: [
          { required: true, message: "请填写协议价格", trigger: "blur" },
        ],
        creditMoney: [
          { required: true, message: "请填写授信额度", trigger: "blur" },
        ],
        billDay: [{ required: true, message: "请填写账期", trigger: "blur" }],
      },
      refreshFlag: 1,
    };
  },
  created() {
    console.log("created");
    this.form.id = this.id;
    if (this.id) this.init();
  },
  methods: {
    init() {
      this.loading = true;
      recordDetail(this.id)
        .then((res) => {
          this.form = res.data.data;
          console.log("-detail-");
          console.log(this.form);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    back(flag) {
      this.$emit("back", flag);
    },
    save() {
      if (!isMobile(this.form.concatPhone))
        return msgError("联系手机号码格式不正确");

      this.$refs.formRef.validate((valid, errObj) => {
        if (valid) {
          this.saveLoading = true;
          if (this.isEdit) {
            update(this.form)
              .then((res) => {
                msgSuccess();
                this.saveLoading = false;
                this.back(true);
              })
              .catch(() => {
                this.saveLoading = false;
              });
          } else {
            save(this.form)
              .then((res) => {
                msgSuccess();
                this.saveLoading = false;
                this.back(true);
              })
              .catch(() => {
                this.saveLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.__form {
}

.select-card {
  border: 1px dashed #e1e1e1;
  border-radius: 5px;
  width: 400px;
  min-height: 100px;
}
.w-200 {
  width: 300px;
}
</style>
